<template>
  <div class="iu-selector">
    <div class="header" @click="openPopup">
      <div class="header-content">
        <div class="name">
          <span v-if="placeholder" style="color:#fff">{{ placeholder }}</span>
          <span v-else>请选择</span>
        </div>
        <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
      </div>
    </div>
    <div v-transfer-dom>
      <popup v-model="showPopup" class="checker-popup">
        <popup-header
          left-text="取消"
          right-text="确认"
          :title="popupTitle"
          :show-bottom-border="false"
          @on-click-left="showPopup = false"
          @on-click-right="eventConfirm"
        ></popup-header>
        <div
          class="iu-selector-popup-area"
          style="padding: 16px;background-color: #fff;"
        >
          <!-- <p style="padding: 0px 5px 12px 2px; font-size: 16px; margin: 0;">业务部门</p> -->
          <checker
            :type="multiple ? 'checkbox' : 'radio'"
            v-model="selectArr"
            default-item-class="iu-selector-popup-item"
            selected-item-class="iu-selector-popup-item-selected"
            disabled-item-class="iu-selector-popup-item-disabled"
            class="iu-selector-popup-list"
          >
            <checker-item
              v-for="(item, index) in options"
              :key="index"
              :value="item.value"
            >
              {{ item.label }}
              <div class="iu-selector-popup-item-checkmark">
                <x-icon
                  type="ios-checkmark-empty"
                  fill="#F70968"
                  size="24"
                ></x-icon>
              </div>
            </checker-item>
          </checker>
        </div>
      </popup>
    </div>
  </div>
</template>
<script>
import {
  Popup,
  PopupHeader,
  Checker,
  CheckerItem,
  TransferDomDirective as TransferDom
} from "vux";

export default {
  name: "selector",
  directives: {
    TransferDom
  },
  data() {
    return {
      showPopup: false,
      selectArr: undefined
    };
  },
  //   model: {
  //     prop: "initSelect",
  //     event: "change"
  //   },
  props: {
    initSelect: {
      type: String | Array
    },
    placeholder: {
      type: String,
      default: ""
    },
    multiple: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    popupTitle: {
      type: String,
      default: ""
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  components: {
    Popup,
    PopupHeader,
    Checker,
    CheckerItem
  },
  watch: {
    initSelect: {
      handler: function() {
        if (this.multiple) {
          this.selectArr = JSON.parse(JSON.stringify(this.initSelect));
        } else {
          this.selectArr = this.initSelect;
        }
      },
      immediate: true
    },
    initSelectId: {
      handler: function() {},
      immediate: true
    }
  },
  methods: {
    openPopup() {
      if (this.disabled) {
        return;
      }
      this.showPopup = true;
    },
    eventConfirm() {
      this.showPopup = false;
      //   console.log(this.selectArr);
      this.$emit("selected", JSON.parse(JSON.stringify(this.selectArr)));
      this.selectArr = undefined;
    }
  }
};
</script>
<style lang="less" scoped>
.iu-selector {
  .header {
    width: 100%;
    font-size: 16px;
    padding: 0 !important;
    color: rgb(111, 111, 119);
    .header-content {
      padding: 0 !important;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      img {
        width: 5px;
        height: 11px;
        margin-left: 15px;
      }
    }
  }
}
.iu-selector-popup-area {
  max-height: 300px;
  overflow: auto;
  .iu-selector-popup-list {
    display: flex;
    flex-direction: column;
    .iu-selector-popup-item {
      width: 100%;
      height: 24px;
      overflow: hidden;
      font-size: 16px;
      line-height: 24px;
      cursor: pointer;
      background-color: #ffffff;
      color: #333;
      border-bottom: 0.05rem solid rgba(226, 226, 226, 0.9);
      padding: 6px 0;
      display: flex;
      justify-content: space-between;
      .iu-selector-popup-item-checkmark {
        display: none;
      }
    }
    .iu-selector-popup-item-selected {
      .iu-selector-popup-item-checkmark {
        display: block;
      }
    }
  }
}
</style>
<style lang="less"></style>
